<template>
  <div class="songs-list">
    <table class="song-table">
      <tr>
        <td class="th-first"></td>
        <td class="th-second"><span>歌曲</span></td>
        <td>专辑</td>
        <td>时长</td>
      </tr>
      <tr class="song-name">
        <td>1</td>
        <td class="play-icon">
          <a href="#"
            >晴天
            <button class="song-btn">mv</button>
            <button class="song-btn">vip</button>
          </a>
          <div class="my-icons">
            <el-icon :size="40" color="#d3dce6" class="video-icon1">
              <VideoPlay />
            </el-icon>
            <el-icon :size="40" color="#d3dce6" class="video-icon2">
              <CirclePlus />
            </el-icon>
          </div>
        </td>
        <td><a href="#">叶惠美</a></td>
        <td>04:29</td>
      </tr>
      <tr class="song-name">
        <td>2</td>
        <td class="play-icon">
          <a href="#"
            >晴天
            <button class="song-btn">mv</button>
            <button class="song-btn">vip</button>
          </a>
          <div class="my-icons">
            <el-icon :size="40" color="#d3dce6" class="video-icon1">
              <VideoPlay />
            </el-icon>
            <el-icon :size="40" color="#d3dce6" class="video-icon2">
              <CirclePlus />
            </el-icon>
          </div>
        </td>
        <td><a href="#">叶惠美</a></td>
        <td>04:29</td>
      </tr>
      <tr class="song-name">
        <td>2</td>
        <td class="play-icon">
          <a href="#"
            >晴天
            <button class="song-btn">mv</button>
            <button class="song-btn">vip</button>
          </a>
          <div class="my-icons">
            <el-icon :size="40" color="#d3dce6" class="video-icon1">
              <VideoPlay />
            </el-icon>
            <el-icon :size="40" color="#d3dce6" class="video-icon2">
              <CirclePlus />
            </el-icon>
          </div>
        </td>
        <td><a href="#">叶惠美</a></td>
        <td>04:29</td>
      </tr>
      <tr class="song-name">
        <td>4</td>
        <td class="play-icon">
          <a href="#"
            >晴天
            <button class="song-btn">mv</button>
            <button class="song-btn">vip</button>
          </a>
          <div class="my-icons">
            <el-icon :size="40" color="#d3dce6" class="video-icon1">
              <VideoPlay />
            </el-icon>
            <el-icon :size="40" color="#d3dce6" class="video-icon2">
              <CirclePlus />
            </el-icon>
          </div>
        </td>
        <td><a href="#">叶惠美</a></td>
        <td>04:29</td>
      </tr>
      <tr class="song-name">
        <td>5</td>
        <td class="play-icon">
          <a href="#"
            >晴天
            <button class="song-btn">mv</button>
            <button class="song-btn">vip</button>
          </a>
          <div class="my-icons">
            <el-icon :size="40" color="#d3dce6" class="video-icon1">
              <VideoPlay />
            </el-icon>
            <el-icon :size="40" color="#d3dce6" class="video-icon2">
              <CirclePlus />
            </el-icon>
          </div>
        </td>
        <td><a href="#">叶惠美</a></td>
        <td>04:29</td>
      </tr>
      <tr class="song-name">
        <td>6</td>
        <td class="play-icon">
          <a href="#"
            >晴天
            <button class="song-btn">mv</button>
            <button class="song-btn">vip</button>
          </a>
          <div class="my-icons">
            <el-icon :size="40" color="#d3dce6" class="video-icon1">
              <VideoPlay />
            </el-icon>
            <el-icon :size="40" color="#d3dce6" class="video-icon2">
              <CirclePlus />
            </el-icon>
          </div>
        </td>
        <td><a href="#">叶惠美</a></td>
        <td>04:29</td>
      </tr>
      <tr class="song-name">
        <td>7</td>
        <td class="play-icon">
          <a href="#"
            >晴天
            <button class="song-btn">mv</button>
            <button class="song-btn">vip</button>
          </a>
          <div class="my-icons">
            <el-icon :size="40" color="#d3dce6" class="video-icon1">
              <VideoPlay />
            </el-icon>
            <el-icon :size="40" color="#d3dce6" class="video-icon2">
              <CirclePlus />
            </el-icon>
          </div>
        </td>
        <td><a href="#">叶惠美</a></td>
        <td>04:29</td>
      </tr>
      <tr class="song-name">
        <td>8</td>
        <td class="play-icon">
          <a href="#"
            >晴天
            <button class="song-btn">mv</button>
            <button class="song-btn">vip</button>
          </a>
          <div class="my-icons">
            <el-icon :size="40" color="#d3dce6" class="video-icon1">
              <VideoPlay />
            </el-icon>
            <el-icon :size="40" color="#d3dce6" class="video-icon2">
              <CirclePlus />
            </el-icon>
          </div>
        </td>
        <td><a href="#">叶惠美</a></td>
        <td>04:29</td>
      </tr>
      <tr class="song-name">
        <td>9</td>
        <td class="play-icon">
          <a href="#"
            >晴天
            <button class="song-btn">mv</button>
            <button class="song-btn">vip</button>
          </a>
          <div class="my-icons">
            <el-icon :size="40" color="#d3dce6" class="video-icon1">
              <VideoPlay />
            </el-icon>
            <el-icon :size="40" color="#d3dce6" class="video-icon2">
              <CirclePlus />
            </el-icon>
          </div>
        </td>
        <td><a href="#">叶惠美</a></td>
        <td>04:29</td>
      </tr>
      <tr class="song-name">
        <td>10</td>
        <td class="play-icon">
          <a href="#"
            >晴天
            <button class="song-btn">mv</button>
            <button class="song-btn">vip</button>
          </a>
          <div class="my-icons">
            <el-icon :size="40" color="#d3dce6" class="video-icon1">
              <VideoPlay />
            </el-icon>
            <el-icon :size="40" color="#d3dce6" class="video-icon2">
              <CirclePlus />
            </el-icon>
          </div>
        </td>
        <td><a href="#">叶惠美</a></td>
        <td>04:29</td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts">
export default {
  name: 'SongsList',
}
</script>

<script lang="ts" setup>
import { VideoPlay, CirclePlus } from '@element-plus/icons-vue'
</script>

<style scoped>
.song-table {
  width: 1200px;
  background-color: #fbfbfd;
  font-size: 14px;
  margin-bottom: 30px;
}
.song-table tr {
  height: 50px;
  color: #666;
}
.song-table tr:first-child {
  text-align: left;
}
.song-table tr td {
  color: #666;
}
.song-table tr td {
  padding-left: 5px;
}
.song-table span {
  font-weight: 100px;
}
.song-table tr:first-child td:first-child {
  width: 50px;
}
.song-table tr:first-child td:last-child {
  width: 150px;
}
.song-name td {
  color: #000;
}
.song-name td a {
  color: #000;
}
.song-btn {
  margin-left: 5px;
  width: 33px;
  border: 1px solid #4bca8c;
  color: #4bca8c;
  border-radius: 15%;
  background-color: aliceblue;
}
.song-name td a:hover {
  color: green;
}
.th-second {
  width: 500px;
}
.play-icon {
  line-height: 50px;
  display: flex;
  justify-content: space-between;
}
.my-icons {
  display: none;
  height: 50px;
}
.play-icon:hover .my-icons {
  display: block;
}
.video-icon1:hover {
  color: green;
}
.video-icon2:hover {
  color: green;
}
.video-icon1,
.video-icon2 {
  height: 50px;
  line-height: 50px;
}
</style>
